<template>
  <div class="m-window" style="color: #949494;overflow: auto;overflow-x: hidden;height:600px">
    <!--客服受理 天进宝-->
    <el-row :gutter="10" style="margin:8px auto;">
      <el-col :span="2">
        <el-button type="primary" @click="returnAgo">返回</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="footer-btns-col">
      <el-col :span="2" v-show="pageSourceCode != 'myProcessed'">
        <el-button type="primary" @click="pass">受理</el-button>
      </el-col>
      <el-col :span="2" v-show="pageSourceCode != 'myProcessed'">
        <el-button type="primary" @click="sendBack">退回</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <emphasisTable :list="general1" v-show="showShort"></emphasisTable>
        <emphasisTable :list="general2" v-show="!showShort"></emphasisTable>
        <emphasisTable :list="general3" style="margin-top:20px;"></emphasisTable>
      </el-col>
    </el-row>
    <el-row v-show="!showShort">
        <el-col :span="23">
            <div class="detail-headerd">
                <label>关联对账函</label>                
            </div>
            <div class="m-agTable m-top2 m-bottom" style="height:180px;">
                <ag-grid-vue class="m-agTableContent ag-theme-balham" 
                    :gridOptions="serviceAcceptGridOptions" 
                    :columnDefs="columnDefs" 
                    :rowData="serviceAcceptData" 
                    v-loading="loading"
                    >
                </ag-grid-vue>
            </div>
        </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form :model="serviceAcceptShortForm" ref="serviceAcceptShortForm">
          <el-form-item prop="note" style="margin-top:-4px;">
            <label style="color:#A7A7A7;">
              退回原因 &nbsp;
              <i class="el-icon-warning"></i>
            </label>
            <el-input type="textarea" v-model="serviceAcceptShortForm.note" placeholder="退回原因" :disabled="pageSourceCode == 'myProcessed'"/>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<style lang="less" scoped>
.footer-btns-col,.header-btns-col{
    position:fixed;
    height: 60px;
    width: 100%;
    bottom: 0;
    z-index: 10;
    margin-left: -11px !important;
    box-sizing:border-box;
    display: flex;
    justify-content: center;
    align-items:center;
    background: #fff;
    padding: 10px 0;
    border-top: 1px solid #eee;
    /deep/ .el-button{
      margin-left: -84px;
    }
  }
  .header-btns-col{
    top: 0;
    justify-content: flex-start;
    border-top: none;
    border-bottom: 1px solid #eee;
    margin-top: 100px;
    /deep/ .el-button{
      margin-left: 8px;
    }
  }
</style>

<script>
import Vue from "vue";
import { mapState, mapActions } from "vuex";
import EmphasisTable from "@/components/emphasisTable.vue";
import { formatPrice, formatRate } from "@/util/format.js";
import { showAlert } from "lesso-common/public/utils"
import gridOptions from "lesso-common/public/gridOptions";
export default {
  props:['pageSourceCode'],
  data() {
    return {
      showShort: true,
      applyInf: {
        itemNo: "",
        finType: "",
        applyAmt: "",
        prepaybackDate: "",
        payDate:"",
        serviceRate: "",
        custName: "",
        custUser: "",
        custPhone: "",
        applyUser: "",
        applyPhone: "",
        finLMonth: ""
      },
      serviceAcceptShortForm: {
        result: 1, //0 未到达、1 待审批、2 通过 、3 退回
        note: "" //退回原因
      },
      examinePass: 2, //2 通过
      examineNotgo: 3, //3 退回
      linkName: "act_fin_server_accept", //流程环节名称
      applyId: "", //申请ID
      flowStepCode: 0, //步骤码
      //页面列表
      loading:false,
      serviceAcceptGridOptions:{},
      columnDefs:[],
      serviceAcceptData:[],

      general1: [
        {
          name: "流程编号：",
          text: "",
          isHit: true,
          isUnderline: true,
          code: "itemNo"
        },
        {
          name: "融资产品：",
          text: "天进宝",
          code: "finType"
        },
        {
          name: "融资金额：",
          text: "",
          code: "applyAmt"
        },
        {
          name: "融资开始日期：",
          text: "",
          code: "payDate"
        },
        {
          name: "融资到期日期：",
          text: "",
          code: "prepaybackDate"
        },
        {
          name: "利率(含税)",
          text: "",
          code: "serviceRate"
        }
      ],
      general2: [
        {
          name: "流程编号：",
          text: "",
          isHit: true,
          isUnderline: true,
          code: "itemNo"
        },
        {
          name: "融资产品：",
          text: "月有钱",
          code: "finType"
        },
        {
          name: "融资月数：",
          text: "",
          code: "finLMonth"
        },
        {
          name: "融资金额：",
          text: "",
          code: "applyAmt"
        }
      ],
      general3: [
        {
          name: "供应商：",
          text: "",
          code: "custName"
        },
        {
          name: "申请人：",
          text: "",
          code: "custUser"
        },
        {
          name: "申请人手机：",
          text: "",
          isHit: true,
          code: "custPhone"
        },
        {
          name: "金融客服：",
          text: "",
          code: "applyUser"
        },
        {
          name: "客服电话：",
          text: "",
          isHit: true,
          code: "applyPhone"
        }
      ]
    };
  },
  components: {
    EmphasisTable
  },
  created() {
    this.serviceAcceptGridOptions = gridOptions();
    this.columnDefs =  [
            {
            headerName: "会计对账单号",
            width: 220,
            field: "accountNo"
          },
          {
            headerName: "对账函月份",
            field: "letterMonth",
            width: 120
          },
          {
            headerName: "应收",
            field: "payBalance",
            width: 150,
            valueFormatter:params=>{
              return formatPrice(params.value)
            }
          },
          {
            headerName: "可融金额",
            field: "borrowBalance",
            width: 150,
            valueFormatter:params=>{
              return formatPrice(params.value)
            }
          },
          {
            headerName: "已融资金额",
            field: "finAmount",
            width: 150,
            valueFormatter:params=>{
              return formatPrice(params.value)
            }
          },
          {
            headerName: "融资状态",
            field: "finStatus",
            width: 100,
            cellRenderer: function(params) {
              if (params.value != undefined && params.value == 1) {
                return "部分融资";
              } else if (params.value == 2) {
                return "已融资";
              } else {
                return "未融资";
              }
            }
          }
        ];
    this.applyId = this.supplyChainFinance.role.ID;
    let params = new Object();
    let that = this;
    params = {
      id: that.applyId
    };
    that.$http
      .getApplyInfo(params)
      .then(response => {
        if (response.data.code == 200) {
          let data = response.data.rows;
          for (var prop in that.applyInf) {
            that.applyInf[prop] = data[prop];
          }
          if (data.finType == 0) {
            //天进宝
            this.showShort = true;
            that.general1.forEach(element => {
              if (element.code != "finType") {
                element.text = that.applyInf[element.code];
              }
              if (element.code == "applyAmt") {
                element.text = formatPrice(element.text);
              } else if (element.code == "prepaybackDate" || element.code == "payDate") {
                element.text = this.$utils.dateFormat(
                  "yyyy-MM-dd",
                  element.text
                );
              } else if (element.code == "serviceRate") {
                element.text = formatRate(element.text) + "/天";
              }
            });
          } else {
            //月有钱
            this.showShort = false;
            that.general2.forEach(element => {
              if (element.code != "finType") {
                element.text = that.applyInf[element.code];
              }
              if (element.code == "finLMonth") {
                element.text = element.text + "个月";
              }
              if (element.code == "applyAmt") {
                element.text = that.applyInf[element.code]+"元";
              }
            });
          }

          that.general3.forEach(element => {
            element.text = that.applyInf[element.code];
          });
          let params={
                supplierId:data.custId,
                accountNo:""
              }
          that.getApplyLetterList(params)
        } else {
            that.$alert("获取申请表信息失败", {
            confirmButtonText: "确定",
            customClass: "alertFailure"
            });
        }
      })
      .catch(errror => {
        that.$alert("查询对账列表失败，请检查网络！", {
          confirmButtonText: "确定",
          customClass: "alertFailure"
        });
      });
    
  },
  computed: {
    ...mapState(["supplyChainFinance"])
  },
  methods: {
    ...mapActions(["changeTOdo","changeMyProcessedCTCode"]),
    async commonUpdate() {
      let that = this;
      let parameter = Object.assign(
        {},
        {
          name: that.linkName,
          applyId: that.applyId
        },
        that.serviceAcceptShortForm
      );
      await that.$http
        .commonUpdate(parameter)
        .then(({ data }) => {
          if (data.code == 200) {
            showAlert({
              msg: `操作成功！`,
              type: 1
            });
            that.changeTOdo({ isMyToDoList: 0 });
          } else {
            showAlert({
              msg: `操作失败：${data.info}`,
              type: 0
            });
          }
        })
        .catch(error => {
          this.$alert("查询失败，请检查网络！", {
            confirmButtonText: "确定",
            customClass: "alertFailure"
          });
        });
    },
    pass() {
      this.$confirm("是否确认通过？")
        .then(_ => {
          this.serviceAcceptShortForm.result = this.examinePass;
          this.serviceAcceptShortForm.note = "";
          this.flowStepCode = "act_fin_server_accept";
          this.commonUpdate();
        })
        .catch(_ => {});
    },
    returnAgo() {
      if(this.pageSourceCode == 'myProcessed'){
        this.changeMyProcessedCTCode('')
      }else{
        this.changeTOdo({ isMyToDoList: 0 });
      }
    },
    sendBack() {
      if (!this.serviceAcceptShortForm.note) {
        showAlert({
          msg: "请填写退回原因",
          type: 2
        });
        return;
      }
      this.$confirm("是否确认退回？").then(_ => {
        this.serviceAcceptShortForm.result = this.examineNotgo;
        this.flowStepCode = 0;
        this.commonUpdate();
      });
    },
   //获取实时对账函列表
        getApplyLetterList(params) {
            let that = this;
            setTimeout(function() {
                that.$http
                .getApplyLetterList(params)
                .then(response => {
                    that.loading = false
                    if (response.data.code == 200) {
                    let rowDatas = response.data.rows
                    rowDatas.forEach(element => {
                        element.letterNo = element.accountNo//对账函编号
                        element.letterId = element.id//对账函id
                        element.letterMonth = element.yMonth//对账函月份
                    })
                     that.serviceAcceptData = rowDatas
                    } else {
                     that.serviceAcceptData = [];
                    }
                })
                .catch(errror => {
                    that.$alert("查询对账列表失败，请检查网络！", {
                    confirmButtonText: "确定",
                    customClass: "alertFailure"
                    });
                });
            }, 1000);
        },

  }
};
</script>



